<template>
  <view class="goods-preferential-box" @click="emit('shutDown', '')">
    <view class="bottomMenu-box-content">
      <view class="bottomMenu-box-content-body" @click.stop="">

        <view class="goods-preferential-title">优惠</view>
        <view class="goods-preferential-promotion">促销</view>
        <view class="goods-preferential-content">
          <text>包邮</text>
          <view>
            实付满80元部分地区包邮,详情请联系客服
          </view>
        </view>
        <view @click.stop=" emit('shutDown', '')" class="goods-preferential-know">我知道了</view>

      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, defineEmits, defineProps, ref } from "vue"


const emit = defineEmits(['shutDown'])



// 组件周期函数--监听组件挂载完毕
onMounted(() => {

});
// 组件周期函数--监听组件数据更新之前
// beforeUpdate() {},
// // 组件周期函数--监听组件数据更新之后
// updated() {},
// // 组件周期函数--监听组件激活(显示)
// activated() {},
// // 组件周期函数--监听组件停用(隐藏)
// deactivated() {},
// // 组件周期函数--监听组件销毁之前
// beforeDestroy() {},

</script>

<style scoped lang="scss">
.goods-preferential-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d0d0da8;
  z-index: 10;
  display: flex;
  justify-content: center;

  .bottomMenu-box-content {
    height: 100vh;
    width: 100%;
    position: relative;


    .bottomMenu-box-content-body {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      min-height: 50vh;
      max-height: 90vh;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: $uni-box-color;
      animation: identifier .2s ease 0s 1 forwards;

      .goods-preferential-title {
        margin: 15rpx auto;
        font-size: 30rpx;
      }

      .goods-preferential-promotion {
        width: 80%;
        margin:10rpx 20rpx 20rpx; 
      }

      .goods-preferential-content {
        width: 80%;
        justify-content: space-between;
        display: flex;
        align-items: center;
        height: 100rpx;
        padding: 20rpx;
        background-color: rgba(248, 212, 212, 0.497);
        border-radius: 3epx;
        font-size: 27rpx;

        text {
          font-size: 40rpx;
          color: red;
          min-width: 130rpx;
          text-align: center;
        }
       
      }

      .goods-preferential-know {
        width: 90%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        color: $uni-box-color;
        margin: 20rpx 0;
        margin-top: auto;
        background-color: $uni-color-error;

        &:hover {
          opacity: .8;
        }
      }
    }

  }


  @keyframes identifier {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }

  }
}
</style>